<template>
  <div class="app-news">

    <div style="display: flex;">
      <a class="app-news-image">
        <van-image
          width="100%"
          height="100%"
          :src="img">
        </van-image>
      </a>
      <div class="app-news-text">
        <div class="app-news-text-title">{{ title }}</div>
        <div class="app-news-text-describ">{{ description }}</div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'AppNews',
    props:{
      title:{
        type:String,
        default:'',
        required:false
      },
      description:{
        type:String,
        default:'',
        required:false
      },
      img:{
        type:String,
        default:'static/mobile/icon/more.png',
        required:false
      }
    }
  }
</script>

<style scoped lang="less">
  .app-news {
    position: relative;
    box-sizing: border-box;
    padding: 1px 10px;
    color: #323233;
    font-size: 12px;

    &-image {
      position: relative;
      -webkit-box-flex: 0;
      -webkit-flex: none;
      flex: none;
      width: 45px;
      height: 45px;
      margin-right: 8px;
    }
    &-image-small {
      width:32px;
      height:32px;
      margin-right: 8px;
    }

    &-text {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      max-height: 45px;

      &-title {
        max-height: 32px;
        font-weight: 500;
        font-size: 1rem;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }

      &-describ {
        max-height: 20px;
        color: #7d7e80;
        line-height: 20px;
        word-break: break-all;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>